import React, { useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import '../Layout/home.css'
import An0 from '../assets/image/an0.jpg'
import Zhi0 from '../assets/image/zhi0.jpg'
import Jiu0 from '../assets/image/jiu0.jpg'
import She0 from '../assets/image/she0.jpg'
import An1 from '../assets/image/an1.jpg' //新的图片
import Zhi1 from '../assets/image/zhi1.jpg' //新的图片
import Jiu1 from '../assets/image/jiu1.jpg' //新的图片
import She1 from '../assets/image/she1.jpg' //新的图片
type Props = {}

const Home = (props: Props) => {
    const que = (index: number) => {
        // 处理点击事件  
        console.log(index);
        if (index === 0) {
            // 创建一个新的数组，并更新第一个元素的img属性  
            const newRouteItems = [...routeItems];
            newRouteItems[0].img = Zhi1;
            newRouteItems[1].img = Jiu0;
            newRouteItems[2].img = An0;
            newRouteItems[3].img = She0;
            setRouteItems(newRouteItems);
        }
        if (index === 1) {
            // 创建一个新的数组，并更新第一个元素的img属性  
            const newRouteItems = [...routeItems];
             newRouteItems[0].img = Zhi0;
            newRouteItems[1].img = Jiu1;
            newRouteItems[2].img = An0;
            newRouteItems[3].img = She0;
            setRouteItems(newRouteItems);
        }
        if (index === 2) {
            // 创建一个新的数组，并更新第一个元素的img属性  
            const newRouteItems = [...routeItems];
             newRouteItems[0].img = Zhi0;
            newRouteItems[1].img = Jiu0;
            newRouteItems[2].img = An1;
            newRouteItems[3].img = She0;
            setRouteItems(newRouteItems);
        }
        if (index === 3) {
            // 创建一个新的数组，并更新第一个元素的img属性  
            const newRouteItems = [...routeItems];
            newRouteItems[0].img = Zhi0;
            newRouteItems[1].img = Jiu0;
            newRouteItems[2].img = An0;
            newRouteItems[3].img = She1;
            setRouteItems(newRouteItems);
        }
    }
    
    const [routeItems, setRouteItems] = useState([
        { path: '/home/Lntelligent', title: '智能检测', img: Zhi1 },
        { path: '/home/Obtain', title: '就业态势', img: Jiu0 },
        { path: '/home/Security', title: '安防管理', img: An0 },
        { path: '/home/Maintenance', title: '设备运维', img: She0 }
    ]);
    const listItems = routeItems.map((item: any, index: number) =>
        <NavLink key={index} to={item.path}>
            <dl onClick={() => que(index)}>
                <dt><img src={item.img} alt="" /></dt>
                <dd>{item.title}</dd>
            </dl>
        </NavLink>
    );
    return (
        <div>

            <div className='container'>


                {/* 左侧 */}
                <div className='left'>

                    <Outlet></Outlet>


                </div>
                {/* 中间 */}
                <div className='center'>

                    {/* 底部菜单栏 */}
                    <div className='bottom'>
                        <div className='main'>

                            {listItems}
                        </div>
                    </div>

                </div>
                {/* 右侧 */}
                <div className='right'>

                </div>
                {/* 头部 */}
                <div className='top'>

                </div>



            </div>
        </div>
    )
}


export default Home